<template>
  <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <h1 style="float: left;line-height: 60px;font-size: 20px;padding: 0 20px">山东财经大学区块链打卡辅助平台</h1>
  </el-menu>
  <div style="width: 95%;text-align: left;padding: 15px 0;margin: 0 auto;">
    <div v-if="$route.params.n_id==='all'">
      <div class="box"
           v-for="item in notify_list" @click="$router.push('/notify/'+item.id)">
        <p class="link" style="text-align:left;font-size: 24px;font-weight: bold;">
          {{ item.title }}
          <span style="font-size: 16px;font-weight: normal;color: #a5a4a4">{{ item.addTime }}</span>
        </p>
        <div style="text-align:left;margin-top: 20px;" v-html="item.content"></div>
      </div>
    </div>
    <div v-else-if="$route.params.n_id==='newww'">
      <el-input v-model="notify.title"></el-input>
      <v-md-editor v-model="notify.content" height="600px"></v-md-editor>
      <el-button style="margin-top: 20px;float:right;" @click="save">保存</el-button>
    </div>
    <div v-else-if="$route.params.n_id==='edit'">
      <el-input v-model="notify.title"></el-input>
      <v-md-editor v-model="notify.content" height="600px"></v-md-editor>
      <el-button style="margin-top: 20px;float:right;" @click="save">保存</el-button>
    </div>
    <div style="padding: 20px 0;width: 60%;margin: 0 auto;" v-else>
      <h2 style="font-size: 36px;">{{ notify.title }} <span
          style="font-size: 16px;font-weight: normal;color: #a5a4a4">{{
          notify.addTime
        }}</span></h2>
      <div style="margin-top: 25px;">
        <v-md-preview :text="notify.content"></v-md-preview>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "notify",
  data() {
    return {notify_list: [], notify: {}, content: ""}
  },
  methods: {
    save() {
      if (this.$route.params.n_id === 'edit') {
        this.$axios.post('/api/update/notify', {
          id: this.$route.params.id,
          content: this.notify.content,
          title: this.notify.title
        }).then((res) => {
          this.$router.push('/notify/' + this.$route.params.id)
        })
      }
      if (this.$route.params.n_id === 'newww') {
        this.$axios.post('/api/insert/notify', {
          content: this.notify.content,
          title: this.notify.title
        })
      }
    }
  },
  mounted() {
    if (this.$route.params.n_id === 'edit') {
      this.$axios.get('/api/notify?n_id=' + this.$route.params.id).then((res) => {
        this.notify = res.data
      })
    } else if (this.$route.params.n_id === 'newww') {
      return
    } else {
      this.$axios.get('/api/notify?n_id=' + this.$route.params.n_id).then((res) => {
        this.notify_list = res.data
        this.notify = res.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
.contents {
  text-align: left;
  margin: 0 auto;
  padding: 40px 0;
}

.box {
  cursor: pointer;
  width: 60%;
  margin: 40px auto 0;
  border-bottom: 1px solid #e7e7e7;
  padding: 0 10px 5px;

  .link {
    font-size: 24px;
    font-weight: bold;
    color: #2a2a2a;
    text-decoration: none;
    margin: 0 15px 0 0;
    transition-duration: .3s;
  }

  &:hover {
    .link {
      color: #409EFF;
      cursor: pointer;
    }
  }
}
</style>